<template>
  <view>
    <wd-calendar v-model="params.COL_0" label="加油日期选择" @confirm="handleConfirm" />
    <template v-for="item in list" :key="item.ID">
      <wd-card :title="'司机：' + item.COL_11">
        <view class="flex flex-col">
            <view class="flex justify-between">
              <view>项目：</view>
              {{ item.COL_10 }}
            </view>
            <view class="flex justify-between">
              <view>油品名称：</view>
              {{ item.COL_1 }}
            </view>
            <view class="flex justify-between">
              <view>油品型号：</view>
              {{ item.COL_2 }}
            </view>
            <view class="flex justify-between">
              <view>加油数量：</view>
              {{ item.COL_3 }} {{ item.unit_type }}
            </view>
          <view class="flex justify-between">
            <view>加油日期：</view>
            {{ item.COL_0 }}
          </view>
            <view class="flex items-center justify-between">
              单据：
              <wd-img v-for="(v,index) in item.imgList" :key="index" :width="50" :height="50" :src="'https://miniapp.zhangmushiye.com/' + v.url.msg" @click="previewImage(item, index)"/>
            </view>
        </view>
      </wd-card>
    </template>
  </view>
</template>

<script setup>
import dayjs from "dayjs";
const { userInfo } = storeToRefs(useAuthStore())

const list = ref([])
const params = {
  mobile: userInfo.value.COL_1,
  COL_0: dayjs().format('YYYY-MM-DD')
}

onShow(() => {
  getList()
})
const getList = () => {
  uni.request({
    url: 'https://miniapp.zhangmushiye.com/bi-api/report/dataapi/duizhangdrvierhis',
    method: 'GET',
    data: params,
    success: (res) => {
      console.log(res.data.data)
      list.value = res.data.data.map((item) => {
        if (item.COL_19) {
          item.COL_19 = JSON.parse(item.COL_19)
          item.imgList = item.COL_19
        }else{
          item.imgList = [
            {
              url: {
                msg: ''
              }
            }
          ]
        }
        return item
      })
    }
  })
}

const handleConfirm = ({ value }) => {
  params.COL_0 = dayjs(value).format('YYYY-MM-DD')
  getList()
}

const previewImage = (item, index) => {
  uni.previewImage({
    urls: item.imgList.map((item) => {
      return 'https://miniapp.zhangmushiye.com/' + item.url.msg
    }),
    current: index
  })
}
</script>

<style lang="scss"></style>
